/* float*/
.fl {
    float: left;
}

.fr {
    float: right;
}

/*clearfix*/
.cfx:before,
.cfx:after,
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after,
.cfx:after{
    clear: both;
}

.bfc {
    overflow: hidden;
}

.clip {
    position: absolute;
    clip: rect(0 0 0 0);
}
/*定位position*/

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.fixed {
    position: fixed;
}

/*ellipsis*/
.elp-no {
    white-space: normal;
    word-break: break-all;
    word-wrap: break-word;
}

.elp {
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.elp-1 {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal !important;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.elp-2 {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal !important;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.elp-3 {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal !important;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.elp-4 {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal !important;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

//justify-content
$flex-jc: (
  start: flex-start,
  end: flex-end,
  center: center,
  between: space-between,
  around: space-around,
);

//align-items
$flex-ai: (
  start: flex-start,
  end: flex-end,
  center: center,
  stretch: stretch,
);
//flex
.d-flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.flex-column {
  flex-direction: column;
}
.flex-wrap{
    flex-wrap: wrap;
}
//justify-content

@each $key, $value in $flex-jc {
  .jc-#{$key} {
    justify-content: $value;
  }
}

//align-items

@each $key, $value in $flex-jc {
  .ai-#{$key} {
    align-items: $value;
  }
}
